<template>
  <lazy-component>
    <div class="homeswiper-box">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item,index) of swiperImg" :key="index">
          <van-image lazy-load :src="staticpath+item.path" width="100%" height="100%" >
            <template v-slot:loading>
              <van-loading type="spinner" size="20" />
            </template>
          </van-image>
        </van-swipe-item>
      </van-swipe>
    </div>
  </lazy-component>
</template>

<script>
import { HomePageSwiper } from "network/homePage";

export default {
  data() {
    return {
      swiperImg: [],
      staticpath: localStorage.getItem("staticpath"),
    };
  },
  name: "",
  created() {
    HomePageSwiper().then((res) => {
      if (res.code == 200) {
        console.log(res);
        this.swiperImg = res.data;
      }
    });
  },
};
</script>

<style scoped>
.homeswiper-box {
  height: 185px;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  height: 185px;
}
.my-swipe .van-swipe-item img {
  width: 100%;
  height: 185px;
}
</style>